<template>
  <el-dialog
    width="700px"
    v-model="dialogFormVisible"
    :title="DialogTitle"
    :show-close="false"
    :close-on-press-escape="false"
  >
    <el-form ref="formRef" :model="form.data" :rules="rules">
      <el-form-item label="用户名" prop="username" label-width="120px">
        <el-input
          v-model="form.data.username"
          :disabled="form.data.id == '' ? false : 'disabled'"
          autocomplete="off"
        />
        <el-alert
          title="默认初始密码: 123456"
          type="success"
          center
          :closable="false"
          show-icon
        />
      </el-form-item>
      <el-form-item label="手机号" prop="phonenumber" label-width="120px">
        <el-input v-model="form.data.phonenumber" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email" label-width="120px">
        <el-input v-model="form.data.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态" label-width="120px">
        <el-radio-group v-model="form.data.status" class="ml-4">
          <el-radio label="0" size="large">正常</el-radio>
          <el-radio label="1" size="large">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" label-width="120px">
        <el-input v-model="form.data.remark" :rows="4" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script  setup>
import { defineEmits, defineProps, reactive, ref, watch } from "vue";
import requestUtil from "@/util/request";
import { ElMessage } from "element-plus";

// 接收父组件传入的参数
const props = defineProps({
  id: {
    type: String,
    default: "",
    required: true,
  },
  dialogFormVisible: {
    type: Boolean,
    default: false,
    required: true,
  },
  dialogTitle: {
    type: String,
    default: "",
    required: true,
  },
});

// 初始化props参数
const dialogFormVisible = ref(props.dialogFormVisible);
let DialogTitle = ref(props.DialogTitle);
const form = reactive({
  data: {
    id: "",
    username: "",
    password: "123456",
    phonenumber: "",
    email: "",
    status: "0",
    remark: "",
  },
});

//自定义规则
let checkUserName = async (rule, value, callback) => {
  if (form.data.id == "") {
    let res = await requestUtil.post("user/checkUserName", {
      username: form.data.username,
    });
    if (res.code == 20001) {
      callback(new Error(res.message));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

//验证rules
const rules = ref({
  username: [
    { requrie: true, message: "请输入用户名" },
    { requrie: true, validator: checkUserName, trigger: "blur" },
  ],
  email: [
    { required: true, message: "邮箱地址不能为空", trigger: "blur" },
    {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
  phonenumber: [
    { required: true, message: "手机号码不能为空", trigger: "blur" },
    {
      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
      message: "请输入正确的手机号码",
      trigger: "blur",
    },
  ],
});

// 提交dialog中的表单
let formRef = ref(null);
let handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const res = await requestUtil.post("user/save", form.data);
      if (res.code == 20000) {
        ElMessage.success(res.message);
        formRef.value.resetFields();
        emits("initDate");
        handleClose();
      } else {
        ElMessage.error(res.message);
      }
    } else {
      ElMessage.error("请检查是否通过校验");
    }
  });
};

//dialog表单关闭  调用emit 方法从而实现父组件的方法控制
const emits = defineEmits(["update:modelValue", "initDate"]);
let handleClose = () => {
  //修改父组件model的值
  emits("update:modelValue", false);
};

//监听dialog中的Visible 实现表单的重置

let initFormData = async (userId) => {
  const res = await requestUtil.get("user/" + userId);
  form.data = res.data.sysUser;
};

watch(
  () => props.dialogFormVisible,
  () => {
    let userId = props.id;
    if (userId == "") {
      //id不存在 重置表单
      form.data = {
        id: "",
        username: "",
        password: "123456",
        phonenumber: "",
        email: "",
        status: "0",
        remark: "",
      };
    } else {
      //id纯在查询 数据库数据进行填入
      initFormData(userId);
    }
  }
);
</script>
<style lang="scss" scoped>
</style>